<template>
  <div style="text-align:justify">
    <!-- <h2>{{ item.title }}</h2> -->
    <div>
      <el-alert :closable="false" style="padding:2px 12px 6px 12px"
        >{{ item.subtitle }}<br />共{{ item.count }}题，{{ item.date }}更新
      </el-alert>
    </div>
    <el-form style="padding:2em 0">
      <el-checkbox
        :label="`设置范围 (${range[0]}~${range[1]})`"
        v-model="isRange"
        @change="handleRangeCheck"
      ></el-checkbox>
      <el-slider
        :disabled="!isRange"
        v-model="range"
        range
        :min="1"
        :max="this.item.count"
        @change="handleRangeChange"
      >
      </el-slider>
      <el-checkbox
        :label="`随机抽取 (${counting})`"
        v-model="isRandom"
        @change="handleRandomCheck"
      ></el-checkbox>
      <el-slider
        :disabled="!isRandom"
        v-model="counting"
        :min="1"
        :max="range[1] - range[0] + 1"
      >
      </el-slider>
      <el-checkbox label="自动跳转到下一题" v-model="autoNext"></el-checkbox>
      <div style="padding:6px;"></div>
      <el-checkbox v-model="isDisorder">
        <span>打乱选项顺序</span
        ><span class="box-jumping"><i class="el-icon-warning"></i></span>
      </el-checkbox>
    </el-form>
    <div>
      <el-alert :closable="false" style="padding:2px 12px 6px 12px"
        >将在第{{ range[0] }}~{{ range[1] }}题中{{
          isRandom ? "随机" : "顺序"
        }}抽取{{ counting }}道题目
      </el-alert>
    </div>
    <div style="text-align:center;padding-top:2em">
      <el-button @click="sendConfig" type="primary">
        开始练习
      </el-button>
    </div>
  </div>
</template>

<script>
/*
    {
        "id": "1",
        "date": "2020/5/8",
        "file": "adsb",
        "title": "执照 ADS-B 签注复习题",
        "count": "300",
        "type_sc": "300",
        "type_mc": "0",
        "type_fb": "0"
    }
*/
export default {
  name: "configView",
  props: ["item"],
  data() {
    return {
      isRange: true,
      counting: this.item.count,
      isRandom: true,
      autoNext: true,
      isDisorder: true,
      range: [1, this.item.count],
    };
  },
  methods: {
    handleRangeCheck() {
      if (!this.isRange) {
        this.range = [1, this.item.count];
      }
    },
    handleRandomCheck() {
      if (!this.isRandom) {
        this.counting = this.range[1] - this.range[0] + 1;
      }
    },
    handleRangeChange() {
      this.counting = this.range[1] - this.range[0] + 1;
      // if (!this.isRandom) {
      //   this.counting = this.range[1] - this.range[0] + 1;
      // }
    },
    // checkRangeFrom() {
    //   if (+this.range[0] < 1) {
    //     this.range[0] = 1;
    //   } else if (+this.range[0] >= this.item.count) {
    //     this.range[0] = this.item.count - 1;
    //     this.range[1] = this.item.count;
    //   } else if (+this.range[1] <= +this.range[0]) {
    //     this.range[1] = +this.range[0] + 1;
    //   }
    //   // this.checkCount();
    //   this.counting = +this.range[1] - +this.range[0] + 1;
    // },
    // checkRangeTo() {
    //   if (+this.range[1] > this.item.count) {
    //     this.range[1] = this.item.count;
    //   } else if (+this.range[1] <= 1) {
    //     this.range[1] = 2;
    //     this.range[0] = 1;
    //   } else if (+this.range[1] <= +this.range[0]) {
    //     this.range[0] = +this.range[1] - 1;
    //   }
    //   // this.checkCount();
    //   this.counting = +this.range[1] - +this.range[0] + 1;
    // },
    // checkCount() {
    //   if (+this.counting > +this.range[1] - +this.range[0]) {
    //     this.counting = +this.range[1] - +this.range[0] + 1;
    //   } else if (+this.counting < 1) {
    //     this.counting = 1;
    //   }
    // },
    sendConfig() {
      // if (!this.isRange) {
      //   this.range[0] = 1;
      //   this.range[1] = this.item.count;
      //   this.counting = this.item.count;
      // }
      let sequence = new Array();
      if (this.isRandom) {
        sequence = this.sequenceRandom(
          this.counting,
          this.range[0],
          this.range[1]
        );
      } else {
        for (let i = this.range[0] - 1; i < this.range[1]; i++) {
          sequence.push(i);
        }
      }
      let config = {
        info: this.item,
        array: sequence,
        pointer: 0,
        autoNext: this.autoNext,
        isDisorder: this.isDisorder,
      };
      this.$emit("start", config);
    },
    sequenceRandom(n, min, max) {
      let a = [];
      for (let i = min - 1; i < max; i++) {
        a.push(i);
      }
      let res = [];
      for (let i = 0; i < n; i++) {
        let index = parseInt(Math.random() * a.length);
        res.push(a[index]);
        a.splice(index, 1);
      }
      return res;
    },
  },
};
</script>

<style scoped>
.box-jumping {
  animation: box 1s infinite;
}
@keyframes box {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
</style>
